<template>
	<view class="app">
		<uni-section title="查询" type="line">
			<view class="example" v-if="ffff">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
					<uni-forms-item label="身份证" required name="zjhm">
						<uni-easyinput v-model="valiFormData.zjhm" placeholder="身份证" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
			<view v-if="!ffff">
				<view class="uni-flex uni-row">
					<view class="text" style="width: 200upx;">姓名：</view>
					<view class="text" style="-webkit-flex: 1;flex: 1;">{{xsuser.xm}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="text" style="width: 200upx;">准考证号：</view>
					<view class="text" style="-webkit-flex: 1;flex: 1;">{{xsuser.zkzh}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="text" style="width: 200upx;">成绩：</view>
					<view class="text" style="-webkit-flex: 1;flex: 1;">{{xsuser.cj}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="text" style="width: 200upx;">等级：</view>
					<view class="text" style="-webkit-flex: 1;flex: 1;">{{xsuser.dj}}</view>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	var vk = uni.vk;
	export default {
		data() {
			// 页面数据变量
			return {
				ffff:true,
				xsuser:{},
				options:{},
				valiFormData: {
					zjhm: '',
					age: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					zjhm: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						},
						{
							minLength: 18,
							maxLength: 18,
							errorMessage: '身份证长度在{maxLength} 个字符',
						}
						]
					},
				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			//this.init(options);
		},
		// 函数
		methods: {
			getXscj(zjbm){
				return vk.callFunction({
				  url: 'client/hymbjy/pub/gsxycjcx.getxscj',
				  data:{
					  zjhm:zjbm
				  }
				}).then((data) => {
					
					if(data.info){
						this.ffff = false
						this.xsuser = data.info
					}else{
						uni.showToast({
							title: `查无此人`,
							icon:'none'
						})
					}
				}).catch((err) => {
				  
				});
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.getXscj(res.zjhm)
					// uni.showToast({
					// 	title: `校验通过`
					// })
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 页面数据初始化函数
			// init(options){
			// 	console.log("init: ",options);
			// },
			// pageTo(path){
			// 	vk.navigateTo(path);
			// }
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss" scoped>
	.example {
		padding: 15px;
		background-color: #fff;
	}
	.uni-flex {
		display: flex;
		flex-direction: row;
	}
	.uni-flex-item {
		flex: 1;
	}
	.uni-row {
		flex-direction: row;
	}
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.inputsytle{
		padding: 10rpx;
	}
	.flex-item {
		width: 33.3%;
		height: 200upx;
		text-align: center;
		line-height: 200upx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150upx;
		text-align: center;
		line-height: 150upx;
	}
	
	.text {
		margin: 15upx 10upx;
		padding: 0 20upx;
		background-color: #ebebeb;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #777;
		font-size: 26upx;
		color: #000000;
	}
	
	.desc {
		/* text-indent: 40upx; */
	}
	
</style>